<script setup lang="ts">
import {
  NForm,
  NInput,
  NSelect,
  NButton,
  NCollapse,
  NFormItem,
  NDatePicker,
  NCollapseItem,
  type SelectOption
} from 'naive-ui'
import { useRoute } from 'vue-router'
import { sendRequest } from '@/utils/api'
import { onMounted, ref, shallowRef } from 'vue'
import type { DicTreeModel } from '@/api/dic'
import type { HttpResponse } from '@/utils/http'
import type { BatchInfoModel, ClueBaseModel, ClueSelectOptionModel } from '@/api/batch'

const route = useRoute()

// 批次信息
const batchDetail = ref({} as BatchInfoModel)
const queryDjBatchDetail = async () => {
  try {
    const [error, res] = await sendRequest<HttpResponse<BatchInfoModel>>({
      module: 'batch',
      api: 'formInfo',
      override: {
        params: {
          batchId: route.params.id
        }
      }
    })
    if (error) throw error
    if (res.code !== 0) throw new Error(res.msg)
    batchDetail.value = res.data
    if (res.data.clueIds) {
      queryClueList(res.data.clueIds)
    }
  } catch (error) {
    console.error(error)
  }
}

// 线索下拉选项
const clueOptions = shallowRef<ClueSelectOptionModel[]>([])
const clueOptionsLoading = ref(false)
const queryClueOptions = async () => {
  try {
    clueOptionsLoading.value = true
    const [error, res] = await sendRequest<HttpResponse<ClueSelectOptionModel[]>>({
      module: 'batch',
      api: 'clueList',
      override: {
        params: {
          batchId: route.params.id
        }
      }
    })
    if (error) throw error
    if (res.code !== 0) throw new Error(res.msg)
    clueOptions.value = res.data
  } catch (error) {
    console.log(error)
  } finally {
    clueOptionsLoading.value = false
  }
}

// 线索列表
const expandNames = ref<number[]>([])
const clueList = ref<ClueBaseModel[]>([])
const queryClueList = async (ids: number[]) => {
  try {
    ids.forEach((e) => {
      queryClueInfo(e).then((data) => data && clueList.value.push(data))
    })
  } catch (error) {
    console.error(error)
  }
}
const queryClueInfo = async (id: number): Promise<ClueBaseModel | null> => {
  try {
    clueOptionsLoading.value = true
    const [error, res] = await sendRequest<HttpResponse<ClueBaseModel>>({
      module: 'batch',
      api: 'clueBaseInfo',
      uri: {
        id
      }
    })
    if (error) throw error
    if (res.code !== 0) throw new Error(res.msg)
    return res.data
  } catch (error) {
    console.log(error)
    return null
  } finally {
    clueOptionsLoading.value = false
  }
}

// 证件类型
const documentTypeOptions = shallowRef<DicTreeModel[]>([])
const queryDocumentTypeOptions = async () => {
  try {
    const [error, res] = await sendRequest<HttpResponse<DicTreeModel[]>>({
      module: 'dic',
      api: 'getTree',
      override: {
        params: {
          dicCode: 'A37'
        }
      }
    })

    if (error) throw error
    if (res.code !== 0) throw new Error(res.msg)
    documentTypeOptions.value = res.data[0] ? res.data[0].children || [] : []
  } catch (error) {
    console.error(error)
  }
}

onMounted(() => {
  queryDjBatchDetail()
  queryClueOptions()
  queryDocumentTypeOptions()
})
</script>

<template>
  <DetailFormProvider>
    <div class="bd-title">批次信息</div>
    <NForm
      disabled
      label-placement="left"
      label-width="100rem"
      :show-feedback="false"
      class="bd-card grid"
    >
      <NFormItem label="批次名称：">
        <NInput
          placeholder="/"
          v-model:value="batchDetail.batchName"
        />
      </NFormItem>
      <NFormItem label="线索名称：">
        <NSelect
          :value="batchDetail.clueIds"
          :options="(clueOptions as unknown as SelectOption[])"
          multiple
          label-field="clueName"
          value-field="id"
          filterable
          placeholder="/"
        />
      </NFormItem>
      <NFormItem label="描述：">
        <NInput
          placeholder="/"
          type="textarea"
          rows="1"
          v-model:value="batchDetail.description"
        />
      </NFormItem>
    </NForm>

    <div class="br"></div>

    <div class="bd-title">线索信息</div>
    <NCollapse v-model:expanded-names="expandNames">
      <template #arrow></template>

      <NCollapseItem
        v-for="item in clueList"
        :key="item.id"
        :name="item.id"
      >
        <template #header>
          <span>{{ item.clueName }}</span>
          <NButton
            color="#6CB187"
            quaternary
            size="tiny"
          >
            点击{{ expandNames.includes(item.id) ? '收起' : '展开' }}
          </NButton>
        </template>

        <NForm
          class="bd-card grid columns-2"
          label-placement="left"
          label-width="100rem"
          disabled
        >
          <NFormItem label="线索名称：">
            <NInput
              placeholder="/"
              v-model:value="item.clueName"
            />
          </NFormItem>
          <NFormItem label="移交人：">
            <NInput
              placeholder="/"
              v-model:value="item.transferUser"
            />
          </NFormItem>
          <NFormItem label="接收人：">
            <NInput
              placeholder="/"
              v-model:value="item.receiveUser"
            />
          </NFormItem>
          <NFormItem label="接收时间：">
            <NDatePicker
              input-readonly
              placeholder="/"
              style="flex: 1"
              format="yyyy-MM-dd HH:mm:ss"
              v-model:formatted-value="item.receiveTime"
            />
          </NFormItem>
          <NFormItem label="姓名：">
            <NInput
              placeholder="/"
              v-model:value="item.userName"
            />
          </NFormItem>
          <NFormItem label="单位：">
            <NInput
              placeholder="/"
              v-model:value="item.dept"
            />
          </NFormItem>
          <NFormItem label="联系方式：">
            <NInput
              placeholder="/"
              v-model:value="item.phone"
            />
          </NFormItem>
          <NFormItem label="提交时间：">
            <NDatePicker
              input-readonly
              placeholder="/"
              style="flex: 1"
              format="yyyy-MM-dd HH:mm:ss"
              v-model:formatted-value="item.commitTime"
            />
          </NFormItem>
          <NFormItem label="证件类型：">
            <NSelect
              :options="(documentTypeOptions as unknown as SelectOption[])"
              label-field="name"
              value-field="name"
              placeholder="/"
              v-model:value="item.idTypeName"
            />
          </NFormItem>
          <NFormItem label="证件号：">
            <NInput
              placeholder="请输入"
              v-model:value="item.idNo"
            />
          </NFormItem>
        </NForm>
      </NCollapseItem>
    </NCollapse>
  </DetailFormProvider>
</template>

<style lang="scss" scoped>
.bd-title {
  font-size: 26rem;
  margin-bottom: 30rem;
  color: #048c5e;
  line-height: 1;
}

.bd-card {
  padding: 20rem;
  background-color: #e1e1e1;
}

.n-form.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 60rem;

  &.columns-2 {
    grid-template-columns: repeat(2, 1fr);
    margin-top: 0;
  }
}
</style>
